import { SettingOutlined } from "@ant-design/icons"
import { Form, Input, Modal, type ModalProps } from "antd"
import { useForm } from "antd/es/form/Form"
import React, { useEffect } from "react"

import OIModal from "~components/OIModal/OIModal"
import { useUIcontentStore } from "~store/uicontentStore"
import type { UIContentState } from "~type/UIcontent"
import { defaultRule } from "~util"

export default function OptionView(params: ModalProps) {
  const width = useUIcontentStore((state) => state.width)
  const height = useUIcontentStore((state) => state.height)

  const setContentUI = useUIcontentStore((state) => state.setContentUI)
  const [optionForm] = useForm<UIContentState>()
  const onFinsh = (values: UIContentState) => {
    setContentUI({ ...values })
    const e: any = {}
    params.onCancel(e)
  }
  const onOk = (e) => {
    optionForm.submit()
    optionForm.setFieldsValue({})
  }
  useEffect(() => {
    optionForm.setFieldsValue({ width, height })
  }, [])
  return (
    <OIModal
      {...params}
      title={<SettingOutlined></SettingOutlined>}
      onOk={onOk}>
      <Form form={optionForm} name="option" onFinish={onFinsh}>
        <Form.Item label="width" name="width" rules={[defaultRule]}>
          <Input></Input>
        </Form.Item>
        <Form.Item label="height" name="height" rules={[defaultRule]}>
          <Input></Input>
        </Form.Item>
      </Form>
    </OIModal>
  )
}
